<template>
    <view class="uni-shadow" @tap.stop="detail">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in list" :key="index" :span="item.span" 
                :class="['col','u-font-26',index==0?'':'u-m-t-20']">
                <text :class="['u-m-r-20','u-line-1',index==0?'u-font-28 font-bold':'uni-dec-color']">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="13"/>
                <text v-else class="u-line-1" 
                    :style="{maxWidth:item.span==12?'80%':'60%'}" 
                    @longtap="longTap(item.value)">
                    {{item.value}}{{item.unit}}
                </text>
            </u-col>
        </u-row>
    </view>
</template>


<script>
export default {
    name: 'teamItem',
    props: {
        listItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data(){
        return{
            list:[
                { field:'bzmc', title:'班组名称', span: 12, value:'' },
                { field:'qymc', title:'所属单位', span: 12, value:'安薪乐' },
                { field:'bzzxm', title:'班组长',  span: 6, value:'安薪乐' },
                { field:'bzzlxdh', title:'电话',  span: 6, value:'安薪乐', type:'phone' },
                { field:'cyrs', title:'班组人数', span: 6, value: 0 },
            ]
        }
    },
    created() {
        this.init()
    },
    watch:{
        listItem(){
            this.init()
        }
    },
    methods: {
        init() {
            this.list.map((v,i)=>{
                if( v.field == 'bzmc'  ){
                    v.title = this.listItem[v.field]
                }else if(v.field=='cyrs'){
                    v.value = this.listItem[v.field]==null?0+'人':this.listItem[v.field]+'人'
                }else{
                    v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据源'
                }
            })
        },

        // 长按事件
        longTap(value){
            uni.$u.toast(value)
        },
    
        // 详情
        detail(){
            uni.navigateTo({
                url: '/pages/team-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>


<style scoped lang="scss">
    .col{
        flex-direction: row;
    }
</style>